<template>
  <div class="block">
    <px-dialog v-model="dialogVisible" title="选择巡检规则" width="50%" align-center>
      <px-form class="custom-form-ui inspect-form" :model="queryParams" label-position="right" label-width="120px" @submit.prevent>
        <px-row :gutter="16">
          <px-col :span="12">
            <px-form-item label="规则名称">
              <px-input
                v-model="queryParams.checkRuleNo"
                placeholder="请输入巡检规则名称/编号"
                maxlength="50"
                clearable
                @blur="queryParams.checkRuleNo = $event.target.value.trim()"
                @keyup.enter.stop="queryTable"
              >
                <template #suffix>
                  <px-icon style="cursor: pointer" @click="queryTable">
                    <search />
                  </px-icon>
                </template>
              </px-input>
              <!-- <input style="width: 0px; height: 0px" /> -->
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <px-button type="primary" @click="queryTable">查询</px-button>
            <px-button @click="resetTable">重置</px-button>
          </px-col>
        </px-row>
      </px-form>
      <px-row>
        <px-col
          ><InspectRulesTable
            v-model:query-params="queryParams"
            :table-data="tableData"
            :total="total"
            :height="'400px'"
            @select-items="selectTreeItems"
            @query-table="queryTable"
        /></px-col>
      </px-row>
      <template #footer>
        <span class="dialog-footer">
          <px-button @click="close">取消</px-button>
          <px-button type="primary" @click="confirm"> 确定 </px-button>
        </span>
      </template>
    </px-dialog>
  </div>
</template>
<script setup lang="ts">
import { queryEquipInspectPlan } from "@/api/erc/inspectPlan";
import { ref, watch } from "vue";
import InspectRulesTable from "./InspectRulesTable.vue";
const dialogVisible = defineModel("isView");
const queryParams = ref({ checkRuleNo: "", pageNum: 1, pageSize: 20 });
const tableData = ref<any>([]);
defineOptions({
  name: "SelectInspectRules"
});
const props = defineProps<{ facCode: string; checkType: Array<string>; checkArea: string }>();
const emits = defineEmits(["selectItems"]);
const total = ref(0);
let selected: any[] = [];
async function queryTable({ pageNum = 1, pageSize = 20 }) {
  let tableDataRaw = await queryEquipInspectPlan(
    Object.assign(queryParams.value, {
      pageNum,
      pageSize,
      facCode: props.facCode,
      checkTypes: props.checkType,
      eqpTypeCodes: props.checkArea ? props.checkArea.split(",") : []
    })
  );
  const { data, pageNum: num, pageSize: size, total: totalRaw } = tableDataRaw;
  total.value = totalRaw;
  tableData.value = data;
}
watch(
  dialogVisible,
  async val => {
    if (val) {
      await queryTable({});
    }
  },
  { immediate: true }
);
async function resetTable() {
  queryParams.value = { checkRuleNo: "", pageNum: 1, pageSize: 20 };
  await queryTable({});
}
function selectTreeItems(val) {
  selected = val;
}
function close() {
  dialogVisible.value = false;
  selected = [];
  queryParams.value = { checkRuleNo: "", pageNum: 1, pageSize: 20 };
}
function confirm() {
  emits("selectItems", selected);
  close();
}
</script>
<style lang="scss" scoped>
.inspect-form {
  margin-bottom: 8px;

  :deep(.px-form-item) {
    width: 100%;
    margin-bottom: 8px;

    .px-input {
      width: 100%;
    }

    .px-select {
      width: 100%;
    }

    .px-select-v2 {
      width: 100%;
    }
  }

  :deep(.px-button + .px-button) {
    margin-left: 8px;
  }
}

.inspect-table-btn {
  display: flex;
  align-items: center;
  margin-bottom: 8px;

  :deep(.px-button + .px-button) {
    margin-left: 0;
  }
}

.inspect-table {
  --px-table-border-color: #dfdfdf;

  font-size: 14px;

  :deep(.px-table__header) {
    thead {
      tr {
        background-color: #e7eefb !important;

        th {
          font-size: 14px;
          font-weight: bold;
          color: #000;
          background-color: #e7eefb !important;
        }
      }
    }
  }
  :deep(.px-table__cell) {
    padding: 8px 0;
  }
}

.inspect-table-pagination {
  position: absolute;
  right: 8px;
  bottom: 0;
}
</style>
